<template>
	<view class="p_bg_all p_bg_f3">
		<view class="list_wrapper">
			<view class="p_flex5">
				<view class="p_font_26 p_color_7a">分享码：{{detailInfo.code}} |<text class="p_margin_l_8"
						@click="getCopy(detailInfo.code)">复制</text></view>
				<view class="top_right" v-if="edit" @click="isShow = true">
					<view v-for="(item, index) in 3" :key="index"></view>
				</view>
			</view>
			<view class="p_flex list_top">
				<image src="https://dy.sykj365.com/uploads/mini/wenjianjia.png" class="p_img_46 p_margin_r_8"></image>
				<view class="p_flex_1 p_font_32">{{detailInfo.name}}</view>
			</view>
			<view class="p_font_26 p_flex9 p_margin_t_24">
				<view>共{{listData.length}}个文件</view>
				<view class="p_flex2" @click="getAllFun">
					<image src="https://dy.sykj365.com/uploads/mini/xuanzhong@2x.png" class="p_img_48 p_margin_r_8" v-if="isAllChoose">
					</image>
					<image src="https://dy.sykj365.com/uploads/mini/weixuanzhong@2x.png" class="p_img_48 p_margin_r_8"
						v-if="!isAllChoose"></image>
					<view>全选</view>
				</view>
			</view>
			<view class="main">
				<view class="list_content" v-for="(item, index) in listData" :key="item.id"
					@click="getItemFun(item, index)">
					<view class="p_font_26 p_color_7a p_margin_r_8">{{index + 1}}</view>
					<view class="p_flex_1 p_flex">
						<view class="p_margin_r_16" @click.stop="getLink(item.file)">
							<image src="https://dy.sykj365.com/uploads/mini/file@2x.png" class="p_img_48"></image>
							<view class="p_font_20 p_color_b2 p_text_c">预览</view>
						</view>
						<view class="p_flex_1" style="width: 0; word-wrap: break-word;">
							<view class="p_font_26">{{item.name}}</view>
							<view class="p_font_20 p_color_b2 p_margin_t_8" v-if="!item.paper">
								请设置打印参数
							</view>
							<view class="p_font_20 p_color_b2 p_margin_t_8" v-else>
								{{item.brand}}/{{item.paper}}/{{item.colour}}/{{getD(item.single_double)}}/{{item.binding_type}}{{getType(item)}}{{item.reduction_printing?'/' + item.reduction_printing: ''}}/{{item.num}}份{{item.print_range?'/' + item.print_range: ''}}
							</view>
						</view>
					</view>
					<image src="https://dy.sykj365.com/uploads/mini/xuanzhong@2x.png" class="p_img_48 p_margin_l_16" v-if="item.choose">
					</image>
					<image src="https://dy.sykj365.com/uploads/mini/weixuanzhong@2x.png" class="p_img_48 p_margin_l_16"
						v-if="!item.choose">
					</image>
				</view>
			</view>
		</view>
		<view class="p_bottom_fix" style="background-color: transparent;">
			<view class="p_btn" @click="isBottonShow = true">
				<view>分享打印清单</view>
			</view>
			<view class="p_btn_line" @click="getAddList">
				<view>加入打印列表</view>
			</view>
		</view>
		<!-- 弹窗 -->
		<van-popup :show="isShow" position="bottom" round>
			<view class="p_font_28 p_text_c">
				<view class="bottom_btn" @click="getEdit">编辑</view>
				<view class="bottom_btn" @click="getDelList">删除</view>
				<view class="p_bg_f3" style="height: 10rpx;"></view>
				<view class="bottom_btn" @click="isShow = false">取消</view>
			</view>
		</van-popup>
		<!-- 弹窗 -->
		<van-popup :show="isBottonShow" position="bottom" round>
			<view class="p_font_28 p_text_c">
				<view class="bottom_btn" @click="getCopyCommand">复制分享口令</view>
				<view class="bottom_btn">
					<button class="p_font_28" plain open-type="share" hover-class="none">分享至微信好友</button>
				</view>
				<view class="bottom_btn" @click="isBottonShow = false;circleShow = true;">分享至朋友圈</view>
				<view class="bottom_btn" @click="getCodeImg">生成分享小程序码</view>
				<view class="p_bg_f3" style="height: 10rpx;"></view>
				<view class="bottom_btn" @click="isBottonShow = false">取消</view>
			</view>
		</van-popup>
		<!-- 分享口令 -->
		<van-dialog use-slot :show="isCommandShow" closeOnClickOverlay title="分享口令" showCancelButton
			cancelButtonText="仅复制口令" confirmButtonText="复制口令文案" @cancel="getCommand(0)" @confirm="getCommand(1)"
			@overlay="isCommandShow = false">
			<view class="p_font_26" style="padding: 48rpx 32rpx;line-height: 44rpx;">
				<view>口令：{{detailInfo.code}}</view>
				<view class="p_margin_t_24">口令文案：</view>
				<view>我正在打印【{{detailInfo.name}}】，打开云印萌网络打印小程序，点击上传文件-打印清单，输入口令【{{detailInfo.code}}】，即可预览/打印</view>
			</view>
		</van-dialog>
		<!-- 分享朋友圈 -->
		<van-popup custom-style="background: transparent" position="top" :show="circleShow"
			@click-overlay="circleShow = false">
			<image src="https://dy.sykj365.com/uploads/mini/load_tips.png" mode="widthFix" style="width: 80%;"></image>
		</van-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				id: '',
				detailInfo: {},
				listData: [],
				isShow: false,
				isBottonShow: false,
				isCommandShow: false,
				circleShow: false,
				isAllChoose: true, // 全选
				commandCode: '',
				edit: false,
			}
		},
		onLoad(e) {
			this.id = e.id;
			if (e.edit) {
				this.edit = true;
			}
		},
		onShow() {
			let self = this;
			if (!uni.getStorageSync('openid')) {
				getApp().getUserLogin('', function() {
					self.getDetail();
				})
			}
			
			if (uni.getStorageSync('openid')) {
				this.getDetail();
			}
		},
		onShareAppMessage(res) {
			let self = this;
			if (res.from === 'button') { // 来自页面内分享按钮
				console.log(res.target)
			}
			return {
				title: `我正在打印【${self.detailInfo.name}】，快来看看吧~`,
				path: '/pages/my/shareDetail?id=' + self.id,
				imageUrl: 'https://dy.sykj365.com/uploads/mini/fenxiang.png'
			}
		},
		onShareTimeline() {
			return {
				title: `我正在打印【${self.detailInfo.name}】，快来看看吧~`,
				path: '/pages/my/shareDetail?id=' + self.id,
				imageUrl: 'https://dy.sykj365.com/uploads/mini/fenxiang.png'
			}
		},
		methods: {
			getDetail() {
				this.$http.post(this.$api.shareDetail, {
					code: this.id
				}).then(res => {
					this.detailInfo = res.data;
					this.listData = res.data.detail;

					this.listData.forEach((n, k) => {
						n.choose = true
					})
				})
			},
			getCopy(value) {
				uni.setClipboardData({
					data: value
				});
			},
			getD(e) {
				if (e == 0) return '单面';
				if (e == 1) return '双面';
				if (e == '') return '';
			},
			getType(item) {
				let t_ = [];
				let s_ = '';
				if (item.cover_type) t_.push(item.cover_type)
				if (item.film_covering) t_.push(item.film_covering)

				if (t_.length > 0) {
					s_ = (t_.join('·'))
				}

				return s_
			},
			getAllFun() {
				this.isAllChoose = !this.isAllChoose;

				this.listData.forEach((n, k) => {
					n.choose = this.isAllChoose
				})
			},
			getItemFun(item, index) {
				item.choose = !item.choose;

				let s_ = true;
				this.listData.forEach((n, k) => {
					if (!n.choose) {
						s_ = false
					}
				})

				this.isAllChoose = s_;
				this.$forceUpdate();
			},
			getLink(e) {
				getApp().getSeeFile(e);
			},
			getEdit() {
				let self = this;
				this.isShow = false;
				getApp().getNavigateTo('/pages/my/editShare?id=' + self.id);
			},
			// 复制口令文案
			getCopyCommand() {
				this.isBottonShow = false;
				this.isCommandShow = true;
			},
			getCommand(index) {
				let t1 = this.detailInfo.code;
				let t2 = `我正在打印【${this.detailInfo.name}】，打开云印萌网络打印小程序，点击上传文件-打印清单，输入口令【${this.detailInfo.code}】，即可预览/打印`;

				this.getCopy(index == 0 ? t1 : t2);
				this.isCommandShow = false;
			},
			// 小程序码
			getCodeImg() {
				this.$http.post(this.$api.share).then(res => {
					getApp().getBigImg([res.data], 0, true);
					this.isBottonShow = false;
				})
			},
			// 加入打印列表
			getAddList() {
				let ids = [];
				this.listData.forEach((n, k) => {
					if (n.choose) {
						ids.push(n.id)
					}
				})

				if (ids.length === 0) return getApp().getMsg('至少选择一个文件');

				this.$http.post(this.$api.shareAdd, {
					ids: ids.toString()
				}).then(res => {
					getApp().getMsg("加入成功", 'success');
					setTimeout(() => {
						getApp().getNavigateTo('/pages/index/printList');
					}, 1500)
				})
			},
			// 删除
			getDelList() {
				this.$http.post(this.$api.shareDel, {
					id: this.id
				}).then(res => {
					this.isShow = false;
					getApp().getMsg('删除成功', 'success');
					getApp().getBack();
					uni.setStorageSync('share', true);
				})
			}
		}
	}
</script>

<style lang="less">
	.list_wrapper {
		background-color: #fff;
		border-radius: 16rpx;
		margin: 32rpx;
		padding: 32rpx;
	}

	.list_top {
		padding: 20rpx 0;
		border-bottom: 1px solid #f4f4f4;
	}

	.top_right {
		display: flex;
		align-items: center;

		view {
			width: 6rpx;
			height: 6rpx;
			border-radius: 50%;
			background-color: #05B570;
			margin: 0 2rpx;
		}
	}

	.bottom_btn {
		line-height: 100rpx;
		border-bottom: 1px solid #f4f4f4;

		button {
			line-height: 100rpx;
		}

		&:last-child {
			border-bottom: none;
		}
	}

	.list_content {
		margin: 32rpx 0;
		border-radius: 16rpx;
		background-color: rgba(5, 181, 112, 0.03);
		padding: 32rpx;
		display: flex;
	}

	.main {
		max-height: calc(100vh - 570rpx);
		overflow-y: auto;
	}
</style>